<script lang='ts' setup>
import packageInfo from '../../../../../package.json'

enum UpdateStatus {
  NO_UPDATE,
  CHECK_UPDATE,
  HAS_UPDATE,
  UPDATED
}

const updateStatus = ref<UpdateStatus>(UpdateStatus.CHECK_UPDATE)

/**
 * 升级完成
 */
function handleFinishUpdate(): void {
  // aaa
}

function handleUpdateApp(): void {
  window.electron.ipcRenderer.send('application:immediately-update')
}
const updateVersion = ref<string>(packageInfo.version)
async function checkUpdate(): Promise<void> {
  let result = await window.electron.ipcRenderer.invoke('application:check-update')
  if (result.needUpdate) {
    updateStatus.value = UpdateStatus.HAS_UPDATE
    updateVersion.value = result.version
  } else {
    updateStatus.value = UpdateStatus.NO_UPDATE
  }
}


function handleCloseWindow(): void {
  window.electron.ipcRenderer.send('application:close-window')
}

onMounted(() => {
  checkUpdate()
  // onUpdated();
})

onUnmounted(() => {
  window.electron.ipcRenderer.removeAllListeners('application::update-downloaded')
})

</script>

<template >
    <div class="update-window" v-if="updateStatus !== UpdateStatus.UPDATED">
      <div class="banner">
        <div class="window-options-panel drag">
          <div class="close-window no-drag">
            <el-icon color="#fff" size="20" @click="handleCloseWindow">
              <IconMdiWindowClose class="icon" />
            </el-icon>
          </div>
        </div>
        <div class="carousel"  v-if="updateStatus === UpdateStatus.HAS_UPDATE">
          <el-carousel trigger="click" height="calc(var(--inner-window-height) * 0.6)">
            <el-carousel-item>
              <div class="carousel-item">
                <el-icon color="#fff" size="120" @click="handleCloseWindow">
                  <IconMdiCode class="icon" />
                </el-icon>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carousel-item">
                <el-icon color="#fff" size="120" @click="handleCloseWindow">
                  <IconMdiCodeJson class="icon" />
                </el-icon>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="carousel" v-if="updateStatus === UpdateStatus.NO_UPDATE">
          <div class="carousel-item">
            <el-icon color="#fff" size="120" @click="handleCloseWindow">
              <IconNotoRocket class="icon" />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="update-options">
        <div class="no-update" v-if="updateStatus === UpdateStatus.NO_UPDATE">当前版本已是最新版本</div>
        <div class="has-update" v-if="updateStatus === UpdateStatus.HAS_UPDATE">有新版本V{{ updateVersion }}可供升级，欢迎使用</div>
        <div class="current-version">当前版本V{{ packageInfo.version }}</div>
        <div class="option-button">
          <el-button v-if="updateStatus === UpdateStatus.HAS_UPDATE" type="primary" size="large" style="width:calc(var(--inner-window-width) * 0.3);" round @click="handleUpdateApp">立即升级</el-button>
          <el-button v-if="updateStatus === UpdateStatus.NO_UPDATE" type="primary" size="large" style="width:calc(var(--inner-window-width) * 0.3);" round @click="handleCloseWindow">我知道了</el-button>
        </div>
      </div>
    </div>
    <div class="updated-window" v-else>
      <div class="banner drag">
        <div class="desc">升级成功</div>
        <div class="version">版本号：{{ packageInfo.version }}</div>
      </div>
      <div class="options">
        <el-button type="primary" size="large" style="width: calc(var(--inner-window-width) * 0.3);" round @click="handleFinishUpdate"> 完成</el-button>
      </div>
    </div>
</template>

<style scoped lang='less'>
.update-window {
  --banner-height: calc(var(--inner-window-height) * 0.6);
  height: var(--inner-window-height);
  background-color: #fff;
  .window-options-panel {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 999999;
    display: flex;
    justify-content: flex-end;
    .close-window {
      margin-top: 5px;
      margin-right: 5px;
      &:hover {
        cursor: pointer;
        .icon {
          color: #B40000;
        }
      }
    }
  }
  .banner {
    height: var(--banner-height);
    background-color: var(--el-color-primary);
    .carousel {
      .carousel-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--banner-height);
      }
    }
  }
  .update-options {
    height: calc(var(--inner-window-height) - var(--banner-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    .no-update {
      font-size: 25px;
      color: var(--el-color-primary);
    }
    .has-update {
      font-size: 14px;
      color: #333333;
    }
    .current-version {
      font-size: 12px;
      color: #999999;
    }
    .option-button {
      margin-top: 20px;
    }
  }
}
.updated-window {
  background-color: #fff;
  .banner {
    height: calc(var(--inner-window-height) / 2);
    background-color: var(--el-color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    .desc {
      font-size: 30px;
      font-weight: 100;
      letter-spacing: 5px;
    }
    .version {
      font-size: 12px;
      margin-top: 10px;
    }

  }
  .options {
    height: calc(var(--inner-window-height) / 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
